<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象遍历练习</title>
</head>

<body>
    <div id="box">
        <ul>
            <li v-for="item in obj">{{item}}</li>
        </ul>
        <table>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
            <tr v-for="(item,index) in arr">
                <td v-for="items in item">{{items}}</td>
                <!-- <td>{{item.star}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.name}}</td> -->
            </tr>
        </table>
        <template v-for="ind in all">
            <div>
                <input type="checkbox" v-model="ind.flage"> <label>{{ind.name}}</label>
            </div>
        </template>
        1111111
        <template v-for="(ind,index) in all" v-if="ind.flage">
            <div>{{ind.name}}</div>
        </template>
        <template v-for="ins in types">
                <input type="radio" v-model="selectItem" :value="ins"><label for="">{{ins}}</label>
        </template>
        <div v-if="selectItem==='萌宠'">
            <template v-for="box in series.pet">
                <img :src="box" alt="">
            </template>
        </div>
        <div v-if="selectItem==='风景'">
            <template v-for="box in series.scenery">
                <img :src="box" alt="">
            </template>
        </div>
        <div v-if="selectItem==='汽车'">
            <template v-for="box in series.car">
                <img :src="box" alt="">
            </template>
        </div>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const roleInfo = ['天魁星——及时雨：宋江', '天罡星——玉麒麟：卢俊义', '天机星——智多星：吴用', '天闲星——入云龙：公孙胜', '天勇星——大刀：关胜', '天雄星——豹子头：林冲', '天猛星——霹雳火：秦明'];
        const roleInf = [
            { star: '天威星', title: '双鞭', name: '呼延灼' },
            { star: '天英星', title: '小李广', name: '华荣' },
            { star: '天贵星', title: '小旋风', name: '柴进' },
            { star: '天富星', title: '扑天雕', name: '李应' },
            { star: '天满星', title: '美髯公', name: '朱仝' },
            { star: '天孤星', title: '花和尚', name: '鲁智深' },
            { star: '天伤星', title: '行者', name: '武松' },
        ];
        const box = new Vue({
            el: "#box",
            data: {
                obj: roleInfo,
                arr: roleInf,
                all: [
                    { "name": "运动", flage: true},
                    { "name": "打球", flage: true },
                    { "name": "游戏", flage: true},
                    { "name": "代码", flage: true },
                    { "name": "爬山", flage: true},
                ],
                selectItem: "萌宠",
                types: ['萌宠', '风景', '汽车'],
                series: {
                    pet: ["https://img0.baidu.com/it/u=2154503972,3428051834&fm=26&fmt=auto&gp=0.jpg", "https://img2.baidu.com/it/u=3137646855,2454399309&fm=26&fmt=auto&gp=0.jpg"],
                    scenery: ["https://img1.baidu.com/it/u=1605489254,3208869051&fm=26&fmt=auto&gp=0.jpg", "https://img1.baidu.com/it/u=3593645114,3563539419&fm=26&fmt=auto&gp=0.jpg"],
                    car: ["https://img0.baidu.com/it/u=155715894,1100584632&fm=26&fmt=auto&gp=0.jpg", "https://img1.baidu.com/it/u=3161057015,1042861478&fm=26&fmt=auto&gp=0.jpg"]
                }
            }
        })
    </script>
</body>

</html>